import { VideoService } from '@/lib/video/video-service';
import Videos from '@/app/components/video-list/videos';
import { Suspense } from 'react';
import VideosSkeleton from '@/app/components/video-list/videos-skeleton';
import Error from '@/app/components/common/error';
import { generateSearchMetadata } from '@/lib/utils/metadata';
import type { Metadata } from 'next';

interface SearchPageProps {
  searchParams: Promise<{
    keyword?: string;
    page?: string;
  }>;
}

// 生成动态元数据
export async function generateMetadata(
  props: SearchPageProps
): Promise<Metadata> {
  // 获取关键词和页码
  const { keyword = '' } = await props.searchParams;
  
  if (!keyword) {
    return {
      title: '搜索影片 - YZZY影视资源',
      description: 'YZZY影视资源网搜索功能，输入电影名、导演或演员姓名进行搜索，找到您想看的影视资源。',
      keywords: '影视搜索,电影搜索,电视剧搜索,综艺搜索,动漫搜索,YZZY影视资源',
    };
  }

  // 使用统一的元数据生成函数
  return {
    ...generateSearchMetadata(keyword),
    robots: {
      index: false,
      follow: true,
    },
  };
}

export default async function SearchPage(props: SearchPageProps) {
  // 获取关键词和页码
  const { keyword = '', page: pageStr = '1' } = await props.searchParams;
  const page = parseInt(pageStr, 10);
  
  // 每页显示的数量
  const pageSize = 24;
  
  try {
    if (!keyword) {
      return (
        <div className="container mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-20 2xl:px-24 py-3 pb-4 sm:pb-4 max-w-full overflow-x-hidden">
          <div className="mb-8">
            <h1 className="search-heading text-2xl md:text-3xl font-bold">搜索影片</h1>
            <p className="search-subheading text-gray-400 mt-2">请输入关键词进行搜索</p>
          </div>
          
          <div className="text-center py-16 bg-gray-800 rounded-lg">
            <svg
              className="w-16 h-16 mx-auto text-gray-600 mb-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
            <h2 className="text-xl font-bold mb-2">搜索影片</h2>
            <p className="text-gray-400">输入电影名、导演或演员姓名进行搜索</p>
            
            <form action="/search" method="get" className="mt-6 max-w-md mx-auto">
              <div className="relative">
                <input
                  type="text"
                  name="keyword"
                  placeholder="搜索影片..."
                  className="w-full py-3 px-4 bg-gray-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-red-500"
                />
                <button
                  type="submit"
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 bg-red-600 hover:bg-red-700 text-white p-2 rounded-full transition"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                    />
                  </svg>
                </button>
              </div>
            </form>
          </div>
        </div>
      );
    }
    
    // 搜索结果
    const { videos, total } = await VideoService.searchVideos(keyword, page, pageSize);

    return (
      <div className="container mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-20 2xl:px-24 py-3 pb-4 sm:pb-4 max-w-full overflow-x-hidden">
        <div className="mb-8">
          <h1 className="search-heading text-2xl md:text-3xl font-bold">搜索结果</h1>
          <p className="search-subheading text-gray-400 mt-2">
            关键词「<span className="text-red-500">{keyword}</span>」共找到 
            <span className="text-red-500 ml-1 font-semibold">{total}</span> 条结果
          </p>
        </div>
        
        <Suspense fallback={<VideosSkeleton />}>
          <Videos 
            videos={videos} 
            page={page} 
            total={total} 
          />
        </Suspense>
      </div>
    );
  } catch (error) {
    console.error('搜索失败:', error);
    return <Error message="搜索失败，请稍后再试" />;
  }
} 